<template>
    <div>
        <ul class="app-image-list clearfix">
            <div class="js-img-list" style="display: inline-block">
                <li class="upload-preview-img" v-for="(item, idx) in imageList" :key="item.id">
                    <img style="cursor:pointer;" :src="item" class="js-image-preview" @click="setPic(idx)">
                </li>
            </div>
        </ul>
    </div>
</template>
<script>

    import Viewer from 'viewerjs';
    import 'viewerjs/dist/viewer.css';
    export default {
        name: 'pic-view',
        components: {
        },
        props: {
            images: {
                type: Array,
                default: function() {
                    return []
                }
            },
            value: {
                type: String
            }
        },
        watch: {
            value(val) {
                this.imageList = val ? val.split(",") : []
            }
        },
        data() {
            return {
                viewerId: null,
                imageList: [],
                currentPicItem: null
            }
        },
        created() {
            this.imageList = this.value ? this.value.split(",") : []
        },
        methods: {
            setPic(index) {
                let all_pic = [];
                if(this.imageList && this.imageList.length > 0) {
                    this.imageList.forEach((item)=>{
                        all_pic.push(item)
                    })
                }
                // setViewer(all_pic, index)

                $("#pic_viewer").html("");
                if(all_pic && all_pic.length > 0) {
                    all_pic.forEach((item, idx)=>{
                        var str  = '<li style="width:100%;">';
                        str += '<img rel-src="' + item + '" src="' + item + '">';
                        str += '</li>';
                        $("#pic_viewer").append(str);
                    })
                }
                this.viewerId && this.viewerId.destroy()
                this.viewerId = new Viewer(document.getElementById('pic_viewer'));
                $('#pic_viewer').find("img").eq(index).trigger("click")
                // window.open(item)
            }
        }
    }
</script>